<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import PopupBox from "@/components/PopupBox.vue";
import requestUtil from "@/utils/request.js";
import {ElMessage} from "element-plus";
let route = useRoute();
let address_id = route.query.id;
let addressList = ref([]);
const loadAddress = async () => {
  const res = await requestUtil.get("/app/loadAddress/", {
    address_id: address_id
  });
  addressList.value = res.data.data;
};
onMounted(() =>{
  loadAddress();
})


const save = async () => {
  if (
    addressList.value.address === "" ||
    addressList.value.name === "" ||
    addressList.value.tel === ""
  ) {
    message.value = "请填写完整信息";
    show.value = true;
    return;
  }
  let res = await requestUtil.put("/app/changeAddress/", {
    address_id: address_id,
    name: addressList.value.name,
    tel: addressList.value.tel,
    address: addressList.value.address
  });
  if (res.data.code === 200) {
    ElMessage.success( "修改成功")
    history.back();
  } else {
    ElMessage.error("修改失败")
  }
};
const onClickLeft = () => history.back();
</script>

<template>
  <div class="addressmanagement">
    <div class="header">
      <van-nav-bar title="修改地址" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <div>
        <!--      <van-address-edit-->
        <!--        :area-list="areaList"-->
        <!--        :area-columns-placeholder="['请选择', '请选择', '请选择']"-->
        <!--      />-->
        <span>姓名</span>
        <input type="text" v-model="addressList.name" />
      </div>
      <div>
        <span>电话</span>
        <input type="text" v-model="addressList.tel" />
      </div>
      <div>
        <span>地址</span>
        <input type="text" v-model="addressList.address" />
      </div>
      <div>
        <button @click="save">保存</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.addressmanagement .content div {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.addressmanagement .content div span {
  margin-right: 20px;
}

button {
  width: 80%;
  font-size: 35px;
  border: none;
  padding: 15px;
  color: white;
  background-color: #4848ff;
  border-radius: 50px;
}

input {
  border: 0.5px solid #ccc;
  border-radius: 10px;
  padding: 5px;
}
</style>